@import '../../var.less';


.vcu-calendar {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family                : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    SimSun, sans-serif;
  display         : flex;
  flex-direction  : column;
  width           : 100%;
  height          : 100%;
  color           : @calendar-color;
  background-color: @calendar-bg-color;
  user-select     : none;
  position        : fixed;
  z-index         : @calendar-zindex;
  top             : 0;
  left            : 100%;
  opacity         : 0;
  visibility      : hidden;
  transition      : .3s all ease-in-out;

  &.is-show {
    left      : 0;
    opacity   : 1;
    visibility: visible;
  }


  &__header {
    flex-shrink: 0;
    box-shadow : 0 2px 10px rgba(125, 126, 128, 0.16);
    position   : relative;
    z-index    : 2;
  }

  &__title {
    font-size  : @calendar-title-font-size;
    height     : @calendar-title-height;
    line-height: @calendar-title-height;
    text-align : center;
    padding    : @calendar-title-padding;
    position   : relative;
  }

  &__title-left {
    position: absolute;

    .icon-jiantouxiangshang {
      transform: rotate(-90deg);
    }
  }

  &__weekdays {
    display: flex;
  }

  &__weekday {
    flex       : 1;
    font-size  : @calendar-weekday-font-size;
    line-height: @calendar-weekday-line-height;
    text-align : center;
  }

  &__body {
    flex                      : 1;
    overflow                  : auto;
    -webkit-overflow-scrolling: touch;
    position                  : relative;
    scrollbar-width           : none;
    /* firefox */
    -ms-overflow-style        : none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }
  }

  &__month-title {
    text-align : center;
    width      : 100%;
    height     : @calendar-month-height;
    line-height: @calendar-month-height;
    font-weight: bold;
    font-size  : @calendar-month-font-size;
    background : @white;

    &.is-fixed {
      position  : absolute;
      top       : 74px;
      opacity   : 0;
      visibility: hidden;
      transition: all .3s ease-in-out;
    }

    &.is-show {
      opacity   : 1;
      visibility: visible;
    }
  }

  &__days {
    position : relative;
    display  : flex;
    flex-wrap: wrap;
  }

  &__month-mark {
    position : absolute;
    top      : 50%;
    left     : 50%;
    z-index  : 0;
    color    : @calendar-month-mark-color;
    font-size: @calendar-month-mark-font-size;
    transform: translate(-50%, -50%);
  }

  &__day {
    position   : relative;
    width      : 14.285%;
    height     : @calendar-day-height;
    box-sizing : border-box;
    font-size  : @calendar-day-font-size;
    cursor     : pointer;
    text-align : center;
    padding-top: 5px;

    &-solar {
      padding-top: 2px;
      font-size  : @calendar-day-solar-font-size;
    }

    &-lunar {
      color: @calendar-day-lunar-color;
    }
  }

  &__box {
    width        : 100%;
    max-width    : 54px;
    height       : 54px;
    display      : inline-block;
    border-radius: 4px;

    &.is-weekend {
      color: @calendar-day-weekend-color;

      .vcu-calendar__day-lunar {
        color: @calendar-day-weekend-color;
      }
    }

    &.is-disabled {
      color : @calendar-day-disabled-color;
      cursor: default;

      .vcu-calendar__day-lunar {
        color: @calendar-day-disabled-color;
      }
    }

    &.is-selected {
      background-color: @primary-color;
      color           : @white;

      .vcu-calendar__day-lunar {
        color: @white;
      }
    }

    &.is-middle {
      max-width    : 100%;
      border-radius: 0;
      color        : @primary-color;
      background   : tint(@primary-color, 90%);

      .vcu-calendar__day-lunar {
        color: @primary-color;
      }
    }

    &.is-start {
      max-width    : 100%;
      border-radius: 4px 0 0 4px;
    }

    &.is-end {
      max-width    : 100%;
      border-radius: 0 4px 4px 0px;
    }
  }

  &__footer {
    flex-shrink   : 0;
    padding       : @calendar-footer-padding;
    box-shadow    : 0 -2px 10px rgba(125, 126, 128, 0.16);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    button {
      margin: 7px 0;
    }
  }
}